<template>
  <div class="export">
    <el-button type="primary" icon="el-icon-download" @click="handleDownload">
      导出Excel
    </el-button>

    <el-dialog :visible.sync="dialogVisible" width="32%" style="margin-top: 150px" :close-on-click-modal="false" :show-close="false">
      <el-progress type="line" :percentage="percentage" :text-inside="true" :stroke-width="20" :color="customColors" style="margin-left: 1rem;margin-right: 1rem" />

      <div class="tip">
        正在导出下载中....
        <!--        <br>请不要切换/关闭本页面-->
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ExportExcel',
  props: {
    options: {
      // 下载选项
      type: Object,
      default: () => {
        return {
          // 导出接口名
          apiName: 'exportExcel'
        }
      }
    }
    /* otherData: {
      type: Object,
      default: () => {
        return {
          // 搜索条件及页码尺寸
        }
      }
    } */
  },
  data() {
    return {
      halfHide: false,
      percentage: 0,
      guid: '',
      dialogVisible: false,
      customColors: [
        { color: '#f56c6c', percentage: 20 },
        { color: '#e6a23c', percentage: 40 },
        { color: '#5cb87a', percentage: 60 },
        { color: '#1989fa', percentage: 80 },
        { color: '#6f7ad3', percentage: 100 }
      ]
    }
  },
  mounted() {
  },
  beforeDestroy() {
    clearTimeout(this.timer)
  },
  methods: {
    handleDownload() {
      this.dialogVisible = true
      this.starDown()
    },
    DownloadFn(url) {
      setTimeout(() => {
        this.guid = ''
        var a = document.createElement('a')
        a.href = url
        a.download = url
        a.click()
        this.percentage = 0
        this.$notify({
          title: '成功',
          message: '修改成功',
          type: 'success',
          duration: 2000
        })
      }, 1000)
    },
    starDown(e) {
      const data = {
        otherData: this.otherData,
        guid: this.guid
      }
      this.$apis[this.options.apiName](data).then((res) => {
        this.percentage = res.percentage || 0
        this.guid = this.guid || res.guid || ''
        console.log(res, data, '请求下载数据')
        res.url ? this.DownloadFn(res.url) : this.timer = setTimeout(() => this.starDown(e), 1000)
      }).catch((/* err */) => {
        this.guid = ''
        this.$notify({
          title: '失败',
          message: '下载成功',
          type: 'error',
          duration: 2000
        })
        /* this.$message.error(err || '下载失败') */
      })
    }
  }
}
</script>

<style scoped lang="scss">
.tip{
  font-size: 20px;
  margin-top: 30px;
  text-align: center;
  color: #ff6600;
}
</style>
